<template>
  <div v-loading="loading">

  <!--  导航栏-->
  <div>
    <public-nav-bar>
      <div class="navBarSearch">

        <el-input type="text" size="mini" v-model="text" placeholder="中文文献、外文文献" maxlength="50" show-word-limit clearable @keydown.enter="jumpToSearch(text)"></el-input>
        <el-button class="navBarSearchBtn" icon="el-icon-search" circle size="mini" @click="jumpToSearch(text)"></el-button>

      </div>
    </public-nav-bar>
  </div>


  <div v-if="isPaperExist">
    <!--  主要内容-->
    <div><detail-content-test :paper-info="paperInfo" :authors="authors"></detail-content-test></div>
  </div>

  <div v-if="loading===false && !isPaperExist">
    <el-card class="paperVanishBoxCard">
      <p>本文章不存在，请返回</p>
      <el-button type="primary" @click="backPage">返回界面</el-button>

    </el-card>

  </div>

  <div><router-view/></div>

  </div>

</template>

<script>

import DetailContent from "@/detail/components/DetailContent";
import DetailNavBar from "@/detail/components/DetailNavBar";
import DetailBottomTabs from "@/detail/components/DetailBottomTabs";
import PublicNavBar from '@/components/PublicNavBar'
import axios from "@/utils/MyAxios";
import qs from "qs";
import DetailContentTest from "@/detail/components/detailContentTest";
export default {
  name: "Detail",
  data() {
    return {
      isLogin: true,
      text: '',
      isPaperExist: false,
      paperInfo: {},
      authors: [],
      loading: true,
    }
  },
  components: {
    DetailContentTest,
    DetailBottomTabs,
    DetailNavBar,
    DetailContent,
    PublicNavBar,
  },
  created() {
    this.addRecord()
    this.getPaperInfo()
  },
  methods: {
    getPaperInfo() {
      let data = {
        paperId: this.$route.query.paperId
      }
      // 获取信息
      axios.post('/api/paper/info', qs.stringify(data)).then(res => {
        this.isPaperExist = false
        console.log(res)
        if (res.data.code === 0) {
          this.loading = false
          this.isPaperExist = true
          this.paperInfo = res.data.data
          this.authors = res.data.data.authors
          console.log(this.paperInfo.journal)
        }
        else if (res.data.code === 1) {
          this.loading = false
          console.log("论文被作者删除")
        }
        else {
          this.loading = false
          console.log("获取论文详情ERR")
        }
      })

    },


    addRecord() {
      let token = JSON.parse(localStorage.getItem('user'))
      if (token === null) return

      token = token.token
      let data = {
        token: token,
        paperId: this.$route.query.paperId
      }
      axios.post('/api/record/add', qs.stringify(data)).then(res => {
        console.log(res);
        if (res.data.code !== 0) {
          console.log("添加浏览记录ERR")
        }
      })
    },

    jumpToSearch(text) {
      console.log(text);

      if (text === '') {
        ElMessage({
          message: '搜索不能为空',
          type: 'warning',
        })
        return
      }

      const { href } = this.$router.resolve({
        path: '/paperSearch',
        query: {
          key: text
        }
      });
      window.open(href, '_self')

    },

    backPage() {
      this.$router.go(-1);
    }

  },
}
</script>

<style scoped>

.paperVanishBoxCard {
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 10%;
  text-align: center;
  font-size: x-large;
}

.navBarSearch {
  margin-top: 2px;
  display: flex;
}

.navBarSearchBtn{
  margin-left: 10px;
}

</style>